<template>
	<view class="rootView">
		<swiper :duration="300" :autoplay="false" style="width:100%;height: 1000rpx;" @change="change"
			:current="currentIndex">
			<swiper-item style="padding: 0 70rpx;box-sizing: border-box;">
				<view class="title">用户登录</view>
				<view class="formView">
					<label>账号：</label>
					<input placeholder="输入账号" v-model="login.name" />
				</view>
				<view class="formView">
					<label>密码：</label>
					<input placeholder="输入密码" v-model="password" password />
				</view>
			</swiper-item>
		</swiper>
		
		<view style="display: flex;text-align: center;justify-content: center;">
			<custBtn btnName="登录"></custBtn>
			<custBtn btnName="注册" background-color="orange"></custBtn>
		</view>
	</view>
</template>

<script>
	import cryptoJs from 'crypto-js'
	import custBtn from '@/components/cust_btn.vue'
	export default {
		components:{
			custBtn
		},
		data() {
			return {
				currentIndex: 0,
				login: {
					name: '',
					password: '',
				},
				password: ''
			}
		},
		methods: {
			change(e) {
				this.currentIndex = e.detail.current
			},
			doLogin() {
				this.login.password = cryptoJs.MD5(this.password).toString()
			}
		}
	}
</script>

<style scoped lang="less">
	.rootView{
		padding: 40rpx 0;
	}
	
	.title{
		text-align: center;
		font-size: 20px;
		margin-bottom: 40rpx;
	}
	
	.formView{
		display: flex;
		justify-content: center;
		text-align: left;
		margin-bottom: 20rpx;
		
		input{
			border-bottom: 1px solid lightgray;
		}
	}
</style>